<template>
  <view class="character-container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="nav-back" @click="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="nav-title">角色生成</text>
      <view class="nav-actions">
        <text class="nav-icon" @click="showHelp">?</text>
      </view>
    </view>

    <!-- 角色属性表单 -->
    <scroll-view class="form-scroll" scroll-y="true">
      <view class="form-section">
        <text class="section-title">基础信息</text>
        
        <!-- 角色名称 -->
        <view class="form-item">
          <text class="label">角色名称</text>
          <input 
            v-model="character.name" 
            class="input" 
            placeholder="请输入角色名称"
            placeholder-class="placeholder"
          />
        </view>

        <!-- 角色类型 -->
        <view class="form-item">
          <text class="label">角色类型</text>
          <view class="type-grid">
            <view 
              v-for="type in characterTypes" 
              :key="type.value"
              class="type-item"
              :class="{ active: character.type === type.value }"
              @click="character.type = type.value"
            >
              <text class="type-icon">{{ type.icon }}</text>
              <text class="type-name">{{ type.name }}</text>
            </view>
          </view>
        </view>

        <!-- 性别 -->
        <view class="form-item">
          <text class="label">性别</text>
          <view class="gender-options">
            <view 
              v-for="gender in genders" 
              :key="gender.value"
              class="gender-item"
              :class="{ active: character.gender === gender.value }"
              @click="character.gender = gender.value"
            >
              <text class="gender-icon">{{ gender.icon }}</text>
              <text class="gender-name">{{ gender.name }}</text>
            </view>
          </view>
        </view>

        <!-- 性格特征 -->
        <view class="form-item">
          <text class="label">性格特征</text>
          <textarea 
            v-model="character.personality" 
            class="textarea" 
            placeholder="描述角色的性格特点..."
            placeholder-class="placeholder"
            maxlength="200"
          />
          <text class="char-count">{{ character.personality.length }}/200</text>
        </view>

        <!-- 外貌描述 -->
        <view class="form-item">
          <text class="label">外貌描述</text>
          <textarea 
            v-model="character.appearance" 
            class="textarea" 
            placeholder="描述角色的外貌特征..."
            placeholder-class="placeholder"
            maxlength="300"
          />
          <text class="char-count">{{ character.appearance.length }}/300</text>
        </view>

        <!-- 背景故事 -->
        <view class="form-item">
          <text class="label">背景故事</text>
          <textarea 
            v-model="character.background" 
            class="textarea" 
            placeholder="描述角色的背景故事..."
            placeholder-class="placeholder"
            maxlength="500"
          />
          <text class="char-count">{{ character.background.length }}/500</text>
        </view>

        <!-- 特殊能力 -->
        <view class="form-item">
          <text class="label">特殊能力</text>
          <textarea 
            v-model="character.abilities" 
            class="textarea" 
            placeholder="描述角色的特殊能力..."
            placeholder-class="placeholder"
            maxlength="200"
          />
          <text class="char-count">{{ character.abilities.length }}/200</text>
        </view>

        <!-- 生成按钮 -->
        <view class="generate-section">
          <button 
            class="generate-btn" 
            :disabled="!canGenerate"
            @click="generateCharacter"
          >
            <text class="btn-text">生成角色</text>
            <text class="btn-icon">✨</text>
          </button>
        </view>

        <!-- 预览区域 -->
        <view v-if="previewData" class="preview-section">
          <text class="section-title">角色预览</text>
          <view class="preview-card">
            <view class="preview-header">
              <text class="preview-name">{{ previewData.name }}</text>
              <text class="preview-type">{{ getTypeName(previewData.type) }}</text>
            </view>
            <view class="preview-content">
              <text class="preview-desc">{{ previewData.description }}</text>
            </view>
            <view class="preview-actions">
              <button class="preview-btn" @click="saveCharacter">保存角色</button>
              <button class="preview-btn secondary" @click="regenerateCharacter">重新生成</button>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      character: {
        name: '',
        type: '',
        gender: '',
        personality: '',
        appearance: '',
        background: '',
        abilities: ''
      },
      characterTypes: [
        { value: 'hero', name: '英雄', icon: '🦸' },
        { value: 'magical_girl', name: '魔法少女', icon: '👸' },
        { value: 'villain', name: '反派', icon: '😈' },
        { value: 'support', name: '辅助', icon: '🤝' },
        { value: 'comic', name: '喜剧', icon: '🤡' },
        { value: 'romantic', name: '浪漫', icon: '💕' }
      ],
      genders: [
        { value: 'male', name: '男性', icon: '👦' },
        { value: 'female', name: '女性', icon: '👧' },
        { value: 'other', name: '其他', icon: '👤' }
      ],
      previewData: null
    }
  },
  computed: {
    canGenerate() {
      return this.character.name && this.character.type && this.character.gender
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    showHelp() {
      uni.showModal({
        title: '帮助',
        content: '填写角色信息后点击生成按钮，AI将根据您的描述创建独特的动漫角色。',
        showCancel: false
      })
    },
    getTypeName(typeValue) {
      const type = this.characterTypes.find(t => t.value === typeValue)
      return type ? type.name : ''
    },
    generateCharacter() {
      if (!this.canGenerate) {
        uni.showToast({
          title: '请填写必要信息',
          icon: 'none'
        })
        return
      }

      uni.showLoading({
        title: '生成中...'
      })

      // 模拟生成过程
      setTimeout(() => {
        uni.hideLoading()
        
        this.previewData = {
          name: this.character.name,
          type: this.character.type,
          description: `这是一个${this.getTypeName(this.character.type)}角色，性格${this.character.personality}，拥有${this.character.abilities}等能力。`
        }

        uni.showToast({
          title: '角色生成成功！',
          icon: 'success'
        })
      }, 2000)
    },
    saveCharacter() {
      uni.showModal({
        title: '保存角色',
        content: '确定要保存这个角色吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '角色已保存',
              icon: 'success'
            })
          }
        }
      })
    },
    regenerateCharacter() {
      this.previewData = null
      this.generateCharacter()
    }
  }
}
</script>

<style scoped>
.character-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #FFE4E6, #F8F8FF);
}

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 30rpx 20rpx;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10rpx);
}

.nav-back {
  padding: 15rpx;
}

.back-icon {
  font-size: 32rpx;
  color: #FF69B4;
}

.nav-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.nav-actions {
  padding: 15rpx;
}

.nav-icon {
  font-size: 28rpx;
  color: #FF69B4;
  font-weight: bold;
}

.form-scroll {
  height: calc(100vh - 120rpx);
  padding: 0 30rpx;
}

.form-section {
  padding: 30rpx 0;
}

.section-title {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  padding-left: 10rpx;
  border-left: 6rpx solid #FF69B4;
}

.form-item {
  margin-bottom: 40rpx;
}

.label {
  display: block;
  font-size: 26rpx;
  color: #333;
  margin-bottom: 20rpx;
  font-weight: 500;
}

.input, .textarea {
  width: 100%;
  background: white;
  border: 2rpx solid #E8E8E8;
  border-radius: 15rpx;
  padding: 25rpx;
  font-size: 26rpx;
  box-sizing: border-box;
}

.input:focus, .textarea:focus {
  border-color: #FF69B4;
}

.placeholder {
  color: #999;
}

.type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.type-item {
  background: white;
  border: 2rpx solid #E8E8E8;
  border-radius: 15rpx;
  padding: 30rpx 20rpx;
  text-align: center;
  transition: all 0.3s ease;
}

.type-item.active {
  border-color: #FF69B4;
  background: #FFF0F5;
}

.type-icon {
  font-size: 40rpx;
  display: block;
  margin-bottom: 10rpx;
}

.type-name {
  font-size: 22rpx;
  color: #333;
}

.gender-options {
  display: flex;
  gap: 20rpx;
}

.gender-item {
  flex: 1;
  background: white;
  border: 2rpx solid #E8E8E8;
  border-radius: 15rpx;
  padding: 25rpx 20rpx;
  text-align: center;
  transition: all 0.3s ease;
}

.gender-item.active {
  border-color: #FF69B4;
  background: #FFF0F5;
}

.gender-icon {
  font-size: 36rpx;
  display: block;
  margin-bottom: 8rpx;
}

.gender-name {
  font-size: 22rpx;
  color: #333;
}

.textarea {
  height: 200rpx;
  resize: none;
}

.char-count {
  display: block;
  text-align: right;
  font-size: 22rpx;
  color: #999;
  margin-top: 10rpx;
}

.generate-section {
  margin: 50rpx 0;
}

.generate-btn {
  width: 100%;
  background: linear-gradient(135deg, #FF69B4, #FF1493);
  border: none;
  border-radius: 25rpx;
  padding: 30rpx;
  color: white;
  font-size: 28rpx;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15rpx;
}

.generate-btn:disabled {
  background: #CCC;
  color: #999;
}

.btn-text {
  font-size: 28rpx;
}

.btn-icon {
  font-size: 24rpx;
}

.preview-section {
  margin-top: 40rpx;
}

.preview-card {
  background: white;
  border-radius: 20rpx;
  padding: 40rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25rpx;
}

.preview-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.preview-type {
  background: #FFE4E6;
  color: #FF69B4;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
}

.preview-content {
  margin-bottom: 30rpx;
}

.preview-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}

.preview-actions {
  display: flex;
  gap: 20rpx;
}

.preview-btn {
  flex: 1;
  background: #FF69B4;
  border: none;
  border-radius: 15rpx;
  padding: 20rpx;
  color: white;
  font-size: 24rpx;
}

.preview-btn.secondary {
  background: #E8E8E8;
  color: #666;
}
</style>